<template>
	<card-box title="常见问题" goto="/question">
		<div class="common_question">
			<div class="item" v-for="(item, index) in questionList" :key="index">
				<span class="link" v-if="!$isHasAuth(['b8263b8735f34c25a2502972fba9aa28'])">{{ item.ask }}</span>
				<router-link class="link" v-else :to="{ path: `/commonQuestion/${item.id}` }">{{ item.ask }}</router-link>
				<p>{{ $cleanHtmlTag(item.answer) }}</p>
			</div>
		</div>
	</card-box>
</template>

<script>
import cardBox from '@/views/common/cardBox';
import { getTbQaList } from '@/api/system/tbQa';
export default {
	components: { cardBox },
	data() {
		return {
			questionList: []
		};
	},
	mounted() {
		this.getQuestionList();
	},
	methods: {
		async getQuestionList() {
			let params = { page: 1, limit: 4, isShow: '1' };
			let result = await getTbQaList(params).then((res) => res.data);
			if (result.code === '0') {
				this.questionList = result.data || [];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.common_question::v-deep {
	height: 252px;
	overflow: hidden;
	.item {
		font-size: 0;
		padding: 12px 0;
		&:last-child {
			padding-bottom: 0;
		}
		a.link,
		span.link {
			display: inline-block;
			font-weight: bold;
			font-size: 15px;
			line-height: 1;
			color: #303133;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			&::before {
				content: 'Q：';
			}
		}
		a.link:hover {
			color: var(--primary);
			text-decoration: underline;
		}
		p {
			line-height: 1;
			color: #909399;
			font-size: 14px;
			margin-top: 11px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			&::before {
				content: 'A：';
				font-size: 15px;
				font-weight: bold;
			}
		}
		span {
			margin-right: 10px;
		}
	}
}
</style>
